<template>
    <!-- 员工详情弹窗 -->
    <uni-popup ref="popup" type="center" :mask-click="false">
      <view class="popup-content">
        <uni-card :is-full="true" class="employee-card">
          <!-- 头部标题和关闭按钮 -->
          <template v-slot:title>
            <view class="card-header">
              <text class="card-title">员工详细信息</text>
              <uni-icons 
                type="closeempty" 
                size="24" 
                color="#999" 
                @click="closePopup"
                class="close-icon"
              ></uni-icons>
            </view>
          </template>
          
          <!-- 员工基本信息 -->
          <view class="employee-info">
            <!-- 头像和基础信息 -->
            <view class="basic-info">
              <image 
				 v-if="employeeInfo.avatar"
                :src="employeeInfo.avatar.url" 
                mode="aspectFill" 
                class="avatar"
              ></image>
			  <uni-icons v-else type="person-filled" color="#00aa00" size="30"></uni-icons>
              <view class="name-section">
                <text class="name">{{ employeeInfo.username }}</text>
                <text class="age">{{ employeeInfo.year || '未知' }}岁</text>
              </view>
            </view>
            
            <!-- 详细信息列表 -->
            <uni-list class="detail-list">
				
				<uni-list-item
				  title="性别" 
				  :rightText="employeeInfo.gender==1 ? '男' : '女'"
				  show-extra-icon
				  :extra-icon="{type: 'person', color: '#7281c3'}"
				></uni-list-item>
              <uni-list-item 
                title="联系电话" 
                :rightText="employeeInfo.mobile || '-'"
                show-extra-icon
                :extra-icon="{type: 'phone', color: '#007AFF'}"
              ></uni-list-item>
			  <uni-list-item
			    title="邮箱" 
			    :rightText="employeeInfo.email || '-'"
			    show-extra-icon
			    :extra-icon="{type: 'email', color: '#abd0ff'}"
			  ></uni-list-item>
			  <uni-list-item
			    title="入职时间" 
			    :rightText="employeeInfo.workDate || '-'"
			    show-extra-icon
			    :extra-icon="{type: 'calendar', color: '#4CD964'}"
			  >
			  <template v-slot:footer>
			  	 <uni-dateformat :threshold="[0, 0]" :date="employeeInfo.workDate" format="yyyy-MM-dd"></uni-dateformat>
			  </template>
			  </uni-list-item>
           
              <uni-list-item 
                title="地址" 
                :rightText="employeeInfo.address || '-'"
                show-extra-icon
                :extra-icon="{type: 'location', color: '#FF9500'}"
              ></uni-list-item>
           
            <uni-list-item
              title="身份证号码" 
              :rightText="employeeInfo.id_card || '-'"
              show-extra-icon
              :extra-icon="{type: 'smallcircle', color: '#abd0ff'}"
            ></uni-list-item>
			<uni-list-item
			  title="创建时间" 
			  :rightText="employeeInfo.create_date || '-'"
			  show-extra-icon
			  :extra-icon="{type: 'calendar', color: '#d9b89e'}"
			>
			<template v-slot:footer>
				 <uni-dateformat :threshold="[0, 0]" :date="employeeInfo.create_date"></uni-dateformat>
			</template>
			</uni-list-item>
			 </uni-list>
            <!-- 工作经历区域 -->
            <view class="work-experience">
              <view class="section-title">
                <uni-icons type="person" size="16" color="#007AFF"></uni-icons>
                <text class="title-text">工作经历</text>
              </view>
              <view class="experience-content">
                <text>{{ employeeInfo.experience || '-' }}</text>
              </view>
            </view>
          </view>
          
          <!-- 操作按钮 -->
          <template v-slot:actions>
            <view class="card-actions">
              <button class="action-btn edit" @click="editEmployee">
                <uni-icons type="compose" size="16" color="#fff"></uni-icons>
                编辑信息
              </button>
            </view>
          </template>
        </uni-card>
      </view>
    </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      employeeInfo: {
		 "_id":'',
       "username": "",
       "gender": 1,
       "mobile": "",
       "num": "",
       "department_id": "",
       "area_code": "",
       "origin_place": "",
       "address": "",
       "avatar": null,
       "id_card": "",
       "workDate": null,
       "year": null,
       "emergency_name": "",
       "emergency_mobile": "",
       "email": "",
       "resume": null,
       "education": "",
       "experience": "",
       "comment": "",
	   "create_date":""
      }
    }
  },
  methods: {
    // 打开弹窗
    openPopup(data) {
	    uni.showLoading({
	      mask: true
	    })
	    uniCloud.database().collection('mydb-employee').doc(data._id).get().then((res) => {
	      const data = res.result.data[0]
	      if (data) {
	        for (var key in this.employeeInfo) {
	        	if (data.hasOwnProperty(key)) {
	        		this.employeeInfo[key] = data[key];
	        	}
	        }
	      }
	    }).catch((err) => {
	      uni.showModal({
	        content: err.message || '请求服务失败',
	        showCancel: false
	      })
	    }).finally(() => {
			this.$refs.popup.open()
	        uni.hideLoading()
	    })
    },
    // 关闭弹窗
    closePopup() {
      this.$refs.popup.close()
    },
    // 联系员工
    contactEmployee() {
      uni.makePhoneCall({
        phoneNumber: this.employeeInfo.phone
      })
    },
    // 编辑员工信息
    editEmployee() {
      uni.navigateTo({
      	url:'./edit?id='+this.employeeInfo._id,
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.popup-content {
  width: 850rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.employee-card {
  margin: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.close-icon {
  padding: 10rpx;
}

.employee-info {
  padding: 20rpx 0;
}

.basic-info {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  padding: 0 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 4rpx solid #f0f0f0;
}

.name-section {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.age {
  font-size: 28rpx;
  color: #666;
}

.detail-list {
  margin-bottom: 40rpx;
}

.work-experience {
  padding: 0 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}

.experience-content {
  background-color: #f8f9fa;
  padding: 30rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #555;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
}

.action-btn {
  flex: 1;
  margin: 0 15rpx;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #fff;
}

.action-btn.contact {
  background: linear-gradient(135deg, #007AFF, #0056CC);
}

.action-btn.edit {
  background: linear-gradient(135deg, #4CD964, #2AC845);
}

.action-btn:active {
  opacity: 0.8;
}

/* 响应式调整 */
@media (max-width: 750px) {
  .popup-content {
    width: 90vw;
  }
  
  .card-actions {
    flex-direction: column;
  }
  
  .action-btn {
    margin: 10rpx 0;
    width: 100%;
  }
}
</style>